<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>

<body>


    <div class="easyui-layout" data-options=" fit:true,border:false">

        <div data-options="region:'west',split:true" title="产品类" style="width:200px;">
                <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'管理',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="tb" style="padding:2px 5px;">
                <input id="name" label="用户名称:" style="width:10%;" />

                <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">查找</a>
                <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加数据</a>
                <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
            </div>

            <div id="dlg" class="easyui-dialog" title="表单信息" data-options="iconCls:'icon-save',closed: true" style="width:400px;padding:10px">

                    <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                            <input   name="_id" style="width:100%;visibility: hidden;">


                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'产品名称:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="descript" style="width:100%" data-options="label:'产品说明:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-numberbox"  name="nums" style="width:100%" data-options="label:'库存:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="sales" style="width:100%" data-options="label:'销售量:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="firm" style="width:100%" data-options="label:'出厂商:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="price" style="width:100%" data-options="label:'出厂价:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="selling" style="width:100%" data-options="label:'零售价:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="color" style="width:100%" data-options="label:'颜色:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="address" style="width:100%" data-options="label:'地址:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox"  name="photo" style="width:100%" data-options="label:'图片地址:',required:true">
                        </div>
                    </form>
                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
                    </div>
            </div>

        </div>
    </div>


    <script>
        var newsId='';
         $('#tt').tree({   //拉取tree
        url:`${window.parent.globalURL}category/list/2`,
        animate:true,
        onClick:function(node){
            newsId=node._id;
            $('#dg').datagrid({
                queryParams: {
                    newsId: node._id
                }
            });
           }
        });
function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                // 将当前页面的表单信息进行获取，然后进行ajax请求
                var formData = $("#ff").serializeJSON();
               // console.log(formData._id.length);
                if(formData._id.length > 0){
                    // update
                    $.ajax({
                        url:`${window.parent.globalURL}products/${formData._id}`,
                        type:'put',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })
                }else{
                    // add
                    console.log(formData);
                    delete formData._id;
                    formData.newsId=newsId;
                    $.ajax({
                        url:`${window.parent.globalURL}products`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');

                    })

                }
           }

        }

    });
    return false; // 阻止默认事件
}

function clearForm(){
    $('#ff').form('clear');
}

$('#dg').datagrid({
    url:`${window.parent.globalURL}products/list`,
    fit:'true',
    border:false,
    striped: true,
    pagination:true,
    toolbar:'#tb',
    columns:[[
        {field:'ck',checkbox:true},
        {field:'name',title:'产品名称',width:'10%'},
        {field:'descript',title:'产品说明',width:'15%'},
        {field:'nums',title:'库存',width:'5%'},
        {field:'sales',title:'销售量',width:'5%'},
        {field:'firm',title:'出厂商',width:'5%'},
        {field:'price',title:'出厂价',width:'5%'},
        {field:'selling',title:'零售价',width:'5%'},
        {field:'photo',title:'图片地址',width:'10%'},
        {field:'color',title:'颜色',width:'5%'},
        {field:'address',title:'产地',width:'5%'},

        {field:'_id',title:'操作', width:'10%',
            formatter: function(value,row,index){
				return `<a href="javascript:void(0)" onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${row._id}')">删除</a>`
			}
		}
    ]]
});

function deleteData(id){
    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}products/${id}`,
                type:'delete'
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });

}

function updateData(id){

    $.ajax({
        url:`${window.parent.globalURL}products/${id}`,
        type:'get'
    }).done(function(res){
        $('#ff').form('load',res);
        $('#dlg').dialog('open');
    })

}

function deleteDatas(){
  var rows = $('#dg').datagrid('getSelections');
  var ids = [];
  for(var i=0;i<rows.length;i++){
    ids.push(rows[i]._id);
  }
  $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}products/deletes`,
                type:'post',
                data:{
                    ids: ids.toString()
                }
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });
}


$("#searchData").click(function(){
    $('#dg').datagrid({
        queryParams: {
            name: $("#name").val()
        }
    });
})


$("#addData").click(function(){
    $('#dlg').dialog('open');
})

$("#removesData").click(function(){
    deleteDatas();
})





</script>
</body>
</html>